<template>
  <div>
    <mall-header></mall-header>
    <mall-bread><span>Home</span></mall-bread>
    <div class="accessory-result-page accessory-page">
      <div class="container">
        <div class="filter-nav">
          <span class="sortby">Sort by:</span>
          <a href="javascript:void(0)" class="default cur">Default</a>
          <a href="javascript:void(0)" class="price" @click="sortByPrice">Price
          </a>
          <a href="javascript:void(0)" class="filterby stopPop" @click="showFilter">Filter by</a>
        </div>
        <div class="accessory-result">
          <!-- filter -->
          <div class="filter stopPop" id="filter" :class="{'filterby-show': isShowFilter}">
            <dl class="filter-price">
              <dt>Price:</dt>
              <dd><a href="javascript:void(0)" :class="{'cur': priceCheck=='all'}" @click="setPrice('all')">All</a>
              </dd>
              <dd v-for="(item,index) of priceFilter" :key="index">
                <a href="javascript:void(0)" :class="{'cur': priceCheck==index}" @click="setPrice(index)">{{item.start}}
                  - {{item.end}}</a>
              </dd>
            </dl>
          </div>

          <!-- search result accessories list -->
          <div class="accessory-list-wrap">
            <div class="accessory-list col-4">
              <ul>
                <li v-for="(item,index) of goodList" :key="index">
                  <div class="pic">
                    <a href="#"><img v-lazy="'/static/'+item.productImage" :key="item._id" alt=""></a>
                  </div>
                  <div class="main">
                    <div class="name">{{item.productName}}</div>
                    <div class="price">{{item.salePrice}}</div>
                    <div class="btn-area">
                      <a href="javascript:;" class="btn btn--m" @click="addCart(item.productId)">加入购物车</a>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <paginate
      v-model="page"
      :page-count="4"
      :page-range="3"
      :margin-pages="2"
      :click-handler="pagesHandle"
      :prev-text="'上一页'"
      :next-text="'下一页'"
      :container-class="'pagination'"
      :page-class="'page-item'"
    ></paginate>
    <div class="md-overlay" v-show="isShowOverlay" @click="closeFilterAndOverLay"></div>
    <modal :mdShow="mdShow1" @close="mdShow1=false">
      <p slot="message">{{this.mdMessage}}</p>
      <div slot="btnGroup">
        <a class="btn btn--m" @click="mdShow1=false" href="javascript:;">关闭</a>
      </div>
    </modal>
    <mall-footer></mall-footer>
  </div>
</template>

<script>
  import './../assets/base.css'
  import './../assets/product.css'
  import MallHeader from './../components/mall-header'
  import MallFooter from './../components/mall-footer'
  import MallBread from './../components/mall-bread'
  import axios from 'axios'
  import Paginate from 'vuejs-paginate';
  import Modal from './../components/Modal'

  export default {
    name: "GoodList",
    components: {
      MallHeader,
      MallFooter,
      MallBread,
      Paginate,
      Modal
    },
    data() {
      return {
        goodList: [],
        priceFilter: [
          {
            start: 0.00,
            end: 100.00
          },
          {
            start: 100.00,
            end: 500.00
          },
          {
            start: 500.00,
            end: 1000.00
          }
        ],
        priceCheck: 'all',
        isShowOverlay: false,
        isShowFilter: false,
        sortFlag: 1,
        page: 1,
        pageSize: 6,
        mdShow1: false,
        mdMessage: ''
      }
    },
    mounted() {
      this.getGoodList();
    },
    methods: {
      getGoodList() {
        console.log(this);
        let param = {
          page: this.page,
          pageSize: this.pageSize,
          sortFlag: this.sortFlag,
          priceRangeCheck: this.priceCheck
        };
        axios.get('/api/goods/list', {
          params: param
        }).then((res) => {
          if (res.data.status === 0) {
            this.goodList = res.data.result.list;
          }
        })
      },
      showFilter() {
        this.isShowOverlay = true;
        this.isShowFilter = true
      },
      setPrice(index) {
        this.priceCheck = index;
        this.closeFilterAndOverLay();
        this.getGoodList();
      },
      closeFilterAndOverLay() {
        this.isShowOverlay = false;
        this.isShowFilter = false
      },
      sortByPrice() {
        if (this.sortFlag === 1) {
          this.sortFlag = -1;
        } else {
          this.sortFlag = 1;
        }
        this.getGoodList();
      },
      pagesHandle() {
        this.getGoodList();

      },
      addCart(procuctId) {
        //再添加到购物车之前，应该向服务器发送请求，检查cookie中是否有userId
        //可以在服务器中全局过滤请求检验是否存在userId，但是为了安全起见，应该专门的从数据库中查userId是否与传过来的匹配
        axios.post('/api/goods/addCart', {productId: procuctId}).then(//post请求{}代表body
          res => {
            if (res.data.status==='0') {
              this.mdMessage='已添加到购物车';
              this.mdShow1=true;
            }else {
              this.mdMessage='请先登录！！嘻嘻';
              this.mdShow1=true;
            }
          }
        )
      }
    }
  }
</script>

<style lang="css">
  .pagination {
    margin-left: 25%;
  }

  .pagination li {
    display: inline;
    margin-left: 5%;
  }

  .active a {
    color: #2310cc;
  }
</style>
